<template>
  <van-dialog v-model="show" show-cancel-button confirm-button-text="确认购买" :before-close="beforeClose">
    <van-cell-group class="vip_panel">
        <div class="price_text"><b>{{price.toFixed(2)}}</b></div>
        <div class="remark_text">成为VIP会员后，可以享受更多的商品折扣</div>
    </van-cell-group>  
  </van-dialog>
</template>
<script>
import { VIP_YUPAY, VIP_WXPAY } from "@/api/user";  
import wx from 'weixin-js-sdk';
import getConfig from "@/vue/mixin/get-config";
export default {
  name: 'buy-vip',
  mixins: [getConfig],

  props: {
      visible: {
          default: false,
          type: Boolean
      },
      code: String
  },
  
  data() {
    return {
      show: false,
      money: '',
      price: 199
    };
  },

  watch: {
      visible() {
          this.show = this.visible;

          if (this.show) {
              this.getGlobalConfig(true).then(config => {
                this.price = config.vipPrice || 199;
            });
          }
      },
      show() {
          this.$emit('visibleChange', this.show);
      },
  },

  created() {
    this.show = this.visible;
    this.getGlobalConfig(true).then(config => {
      this.price = config.vipPrice || 199});
  },

  methods: {
    beforeClose(action, done) {
      let vm = this;  
      if (action === 'confirm') {
        // if (this.user.credit2 >= this.price) {
        //   this.yuPay(done);
        // } else {
        //   this.wxPay(done);
        // }
        this.wxPay(done);
      } else {
        done(true);
      }
    },
    // yuPay(done){
    //   this.$dialog
    //     .confirm({
    //       message: "余额支付：¥" + this.price.toFixed(2),
    //       cancelButtonText: "取消"
    //     }).then(() => {
    //       this.$reqPost(VIP_YUPAY, {
    //         memberId: this.user.id,
    //         code: this.code,
    //         centreId: this.user.centreId
    //       }).then(res => {
    //         done(true);
    //         if (res.data.data > 0) {
    //           this.showVipResult(true);
    //         }
    //       }).catch(() => {
    //       });
    //     }).catch(() => {
    //       done(false);
    //     });
    // },

    wxPay(done) {
      let vm = this;
      this.$reqPost(VIP_WXPAY, {
        memberId: this.user.id,
        openId: this.user.openid,
        code: this.code
      }, {hideLoading: true}).then(res => {
        let payReq = res.data.data;
        payReq.timestamp = payReq.timeStamp; //js sdk需要小写时间戳
        payReq.success = function (data) {
          vm.showVipResult(true);
       };
        payReq.fail = function (data) {
          vm.$dialog.alert({
            message: data.errMsg
          });
        };

        wx.ready(function () {
          done(true);
          wx.chooseWXPay(payReq);
        });
      });
    },

    showVipResult() {
      this.user.isVip = 1;
      this.saveUser(this.user);
      this.$dialog.confirm({
          message: '恭喜您成为VIP！', 
          confirmButtonText: '去逛逛', 
          showCancelButton: false
        }).then(() => {
        this.$router.push({name: 'home'});
      }).catch(() => {});
    },
  }
}
</script>
<style lang="scss" scoped>
.vip_panel {
    padding: 20px 20px 10px 20px;
    text-align: center;
}

.price_text {
    color: $red;
    font-size: 32px;
    margin-bottom: 10px;

    ::before {
        content: '¥';
        font-size: 12px;
        margin-right: 3px;
    }
}

.remark_text {
    font-size: 12px;
    color: gray;
    padding: 5px 8px;
}
</style>
